<!DOCTYPE html>
<html>
<head>
    <title>Video.js | HTML5 Video Player</title>

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-126511134-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-126511134-1');
    </script>


    <script>
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?252eee41bd88bc1e98bb243e22bd468f";
          var s = document.getElementsByTagName("script")[0]; 
          s.parentNode.insertBefore(hm, s);
        })();
    </script>

    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="video-js/video-js.css" rel="stylesheet">
    <script src="video-js/video.js"></script>
    <script src="video-js/videojs-contrib-hls.min.js"></script>
    <script>
        videojs.options.flash.swf = "video-js/video-js.swf"
    </script>
</head>
<body>
<center>
    <video id="live-stream" class="video-js vjs-default-skin vjs-big-play-centered"
           controls autoplay preload="auto"
           poster="videodemo.png"
           data-setup='{"example_option":true}'
           webkit-playsinline="true" 
           x-webkit-airplay="true"
           x5-video-player-type="h5" >
        <source src="http://2751.liveplay.myqcloud.com/live/2751_d9de4c825ab2936ca9e67a77dd6e1e8a.m3u8"
                type="application/x-mpegURL">
    </video>
    <canvas id="myCanvas" width="640" height="380"></canvas>
    <button onclick="testClick()">截图</button>
</center>

<script>


    var width=640;
    var height=380;

    var video = document.getElementById("live-stream");
    var _canvas = document.getElementById("myCanvas");

    var ctx = _canvas.getContext('2d');
    ctx.fillStyle = '#ffff00';
    ctx.fillRect(0, 0, width, height);


    var options = {
        width: 1080,
        height: 520
    }
    var player = videojs('live-stream', options);

    player.on(['loadstart', 'play', 'playing', 'firstplay', 'pause', 'ended', 'adplay', 'adplaying', 'adfirstplay', 'adpause', 'adended', 'contentplay', 'contentplaying', 'contentfirstplay', 'contentpause', 'contentended', 'contentupdate'], function (e) {
        console.warn('VIDEOJS player event: ', e.type);
    });


    console.log("ctx:"+ctx);

    function testClick(){
        ctx.drawImage(video, 0, 0, width, height);  // 将video中的数据绘制到canvas里
        //saveImage(canvas, 'screen_' + new Date().getTime() + '.png');  // 存储图片到本地


        // var c1 = ctx.getImageData(width/2-1, 0, 1, 1).data;
        // var red = c1[0];
        // var green = c1[1];
        // var blue = c1[2];

        var kk="";
        var ct=0;
        //for(var i=7;i>=0;i--){
        for(var i=0;i<112;i++){
            if(ct==0){
                var c1 = ctx.getImageData(width/2-55+i, 0, 1, 1).data;
                var red = c1[0];
                var green = c1[1];
                var blue = c1[2];
                console.log("red:"+red+",green:"+green+",blue:"+blue+",total:"+(red+green+blue));
                if(red<120 && green<120 && blue<120){
                    kk=kk+"0";
                }else{
                    kk=kk+"1";
                }
            }
            ct++;
            if(ct>=4){
                ct=0;
            }
        }
        console.log("======kk:"+kk+"，---10进制："+parseInt(kk,2));



        //console.log("red:"+red+",green:"+green+",blue:"+blue+",total:"+(red+green+blue));

        //0,1,2,3,4,5,6,7,8,9,10,11,12,13
    }

    //setInterval(testClick,1000);

    // function saveImage (canvas, filename) {
    //     var image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
    //     saveFile(image, filename || 'file_' + new Date().getTime() + '.png');
    // }
    // function saveFile(data, filename) {
    //     save_link.href = data;
    //     save_link.download = filename;
    //     var event = document.createEvent('MouseEvents');
    //     event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    //     save_link.dispatchEvent(event);
    // }

</script>
<script type="application/javascript">
    function foo(n) {
        return function (i) {
            return n += i;
        }
    }
    console.log(foo(10)(20));
</script>


</body>
</html>

